<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>ShadowSkin</title>
</head>

<body onload="documentLoad()">
    <link href="cube.css" rel="stylesheet">
    <link href="viewer2.css" rel="stylesheet">
    <!--script src="debugger.js"></script-->
    <script src="blocks3.js"></script>
    <script src="hframe.js"></script>
    <script src="mobs.js"></script>
    <script src="rotateModel.js"></script>
    <script src="pic.js"></script>
    <script src="fastTemplate.js"></script>
    <script src="effect.js"></script>
    <script src="viewer2.js"></script>
    <!--script src="debugger.js"></script-->
    <ftm-src id="uiinfo" ftm-args="showClothes viewingPart">\s \s</ftm-src>
    <!--画画工具-->
    <template ftm-el="draw-tool" ftm-args="tool name mode" ftm-bddata="^" ftm:class="icon"
        ftm-oncreate="drawToolCreate(event)">
        <div class="_img" ftm:style="background-color:%{js:data.selected==this?'#ffffffd0':'auto'}">
            <img ftm:src="%{js:'pic/'+data.tool+(data.mode!==null?'_'+data.mode:'')+'.png'||''}"
                ftm::onclick="this.ftmObs.parentNode.ftmData.selected=this.ftmObs;useTool('%{tool}')">
            <div class="_triangle" ftm:style="display: %{js:data.mode!=null?'auto':'none'};"></div>
        </div>
        <div>%{name}</div>
    </template>
    <!--短按按钮-->
    <template ftm-el="st-btn" ftm-args="icon name active" ftm-bddata="^" ftm:class="icon">
        <img ftm:src="%{js:'pic/'+data.icon+'.png'||''}" ftm::onclick="%{active}">
        <div>%{name}</div>
    </template>
    <!--身体部位选择-->
    <template ftm-el="body-part" ftm-args="part clothes" ftm-bddata="^"
        ftm:onclick="showBodyPart(this.parentNode.ftmData.selected,this);" ftm:button="%{part} %{clothes}">
        <img ftm:src="pic/human_%{part}.png" sele="%{js:data.selected==this?true:false}">
    </template>
    <!--显示设置-->
    <template ftm-el="view-opt" ftm-args="view value func color" ftm:onclick="%{func}()" ftm:id="%{view}">
        <img ftm:src="pic/%{view}.png" ftm:style="background-color:%{color}">
    </template>
    <!--画笔块-->
    <template ftm-el="pen-block" ftm-args="color nib size opacity" ftm-oncreate="loadPen(this)"
        ftm:style="background:%{color};color:%{js:calcColor(data.color)};border-radius:%{js:data.nib=='rect'?'5px':'100cm'}"
        ftm:onclick="usePen(this.ftmData)">
        <span>%{js:data.nib[0].toUpperCase()}%{size}</span><br>
        <span>%{opacity}</span>
    </template>
    <div>
        <div id="pictureViewer" effect-handle ftm-src ftm-args="image">
            <pre ftm-data></pre>
            <div ftm:style="display:%{js:data.image?'none':'auto'}">
                还没有上传参考图片喔，在 文件-添加参考 上传
            </div>
            <canvas></canvas>
        </div>
        <div id="colorbar">
            <div id="template"></div>
            <div id="history">
                <pen-block>#0e7af9 rect 1 100</pen-block>
            </div>
        </div>
        <div id="headbar" effect-handle>
            <st-btn>backward_arrow 返回 skinOpr('close')</st-btn>
            <st-btn>save 保存 skinOpr('save')</st-btn>
            <st-btn>copy 复制工程 skinOpr('copy')</st-btn>
            <st-btn>download 导出皮肤 outputFile('skin')</st-btn>
            <st-btn>output 导出工程 outputFile('project')</st-btn>
            <st-btn>trash 删除 skinOpr('delete')</st-btn>
            <st-btn>add_ref 添加参照 addReference()</st-btn>
        </div>
        <div id="head2">
            <div id="skinName" contenteditable onkeypress="if(event.key=='Enter')this.blur()" onblur="rename(this);">
                name</div>
            <div id="undoandredo">
                <img src="pic/backward_arrow.png" onclick="undo()">
                <img src="pic/forward_arrow.png" onclick="redo()">
            </div>
        </div>
        <div id="middle">
            <div id="leftBar" ftm-src>
                <body-part ftm-key="selected">whole whole</body-part>
                <body-part>head hat</body-part>
                <body-part>rightArm rightSleeve</body-part>
                <body-part>body jacket</body-part>
                <body-part>leftArm leftSleeve</body-part>
                <body-part>rightLeg rightPants</body-part>
                <body-part>leftLeg leftPants</body-part>
            </div>
            <div id="scene"></div>
            <div id="palettePannel" effect-handle ftm-src ftm-oncreate="onPaletteLoad(this)"
                oninput="paletteInput(event)">
                color:#972dae
                nib:rect
                size:1
                opacity:25
                <div>Palette</div>
                <input name="color" type="color" ftm:value="%{color}">
                <select name="nib" ftm:value="%{nib}">
                    <option value="rect">矩形笔尖</option>
                    <option value="circle">圆形笔尖</option>
                </select>
                <div>
                    笔头半径<br>
                    <input type="range" name="size" ftm:value="%{size}" min="1" max="5">
                    %{size}
                </div>
                <div>
                    不透明度<br>
                    <input name="opacity" type="range" ftm:value="%{opacity}">
                    %{js:data.opacity+"%"}
                </div>
                <button onclick="selectPen()">添加画笔</button>
            </div>
            <div id="rightBar">
                <view-opt>arm alex changeArm pink</view-opt>
                <view-opt>clothes false showClothes lightgrey</view-opt>
                <view-opt>file true showFileOpr palegreen</view-opt>
                <view-opt>show_ref false showReference lightgrey</view-opt>
                <view-opt>palette false showPalette lightgrey</view-opt>
            </div>
        </div>
        <div id="footbar" ftm-src>
            <draw-tool ftm-key="selected">pen 画笔</draw-tool>
            <draw-tool>eraser 橡皮擦</draw-tool>
            <draw-tool>straw 吸色器</draw-tool>
            <draw-tool>water 水渍</draw-tool>
            <draw-tool>torch 光照 lighter</draw-tool>
            <draw-tool>blackwhite 混合黑白 white</draw-tool>
            <draw-tool>saturation 饱和工具</draw-tool>
            <draw-tool>change_color 换色器</draw-tool>
            <draw-tool>flip 翻转面 vertical</draw-tool>
            <draw-tool>copy 复制</draw-tool>
            <draw-tool>paste 粘贴</draw-tool>
        </div>
        <input type="file" style="display: none;" id="upl_ref" onchange="uploadReference(this.files[0])">
    </div>

</body>

</html>